<template>
  <a-modal class="config_modal" v-model="visible" :title="title" :confirmLoading="submitLoading" width="800px"
    ok-text="确认" cancel-text="取消" @ok="addFormSubmit">
    <div style="width: 100%;display: flex;justify-content: flex-start;">
      <a-menu mode="inline" @click="configMenu" style="width: 160px;flex-shrink: 0;"
        v-if="bid == true">
        <a-menu-item key="1">
          单行文本
        </a-menu-item>
        <a-menu-item key="2">
          下拉单选
        </a-menu-item>
        <a-menu-item key="3">
          下拉多选
        </a-menu-item>
        <a-menu-item key="4">
          日期组件
        </a-menu-item>
        <a-menu-item key="5">
          数字格式
        </a-menu-item>
        <a-menu-item key="6">
          图片
        </a-menu-item>
        <a-menu-item key="7">
          文件
        </a-menu-item>
        <a-menu-item key="8">
          超链接
        </a-menu-item>
      </a-menu>
      <a-form :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" style="width: 100%;">
        <a-page-header :title="configTitle">
          <a-form-item label="显示名称">
            <a-input v-decorator="['fieldName', { rules: [{ required: true, message: '请输入名称' }] }]" />
          </a-form-item>
          <!-- <a-form-item label="默认值">
            <a-input v-decorator="['placeHoldContent', { rules: [{ required: true, message: '请输入默认值' }] }]" />
          </a-form-item> -->
          <a-form-item label="排序">
            <a-input v-decorator="['orderNo']" />
          </a-form-item>
          <a-form-item label="单张图片上传大小" v-if="configType == 6">
            <a-input v-decorator="['content']" />
          </a-form-item>
          <a-form-item label="单个文件上传大小" v-else-if="configType == 7">
            <a-input v-decorator="['content']" />
          </a-form-item>
          <a-form-item label="选项编辑" v-else-if="configType == 2 || configType == 3">
            <div v-for="(item, index) in selectData" :key="'sel' + index">
              <a-input v-model="selectData[index]" placeholder="请输入" style="width: 300px;" /><a-icon
                @click="selectAdd(index)" type="plus-circle" class="selectIcon" /><a-icon @click="selectDel(index)"
                type="delete" class="selectIcon" style="color: #f81d22;" />
            </div>
          </a-form-item>
          <a-form-item label="日期格式" v-else-if="configType == 4">
            <a-select v-model="contentDate">
              <a-select-option :key="'yyyy-MM'">
                yyyy-MM
              </a-select-option>
              <a-select-option :key="'yyyy-MM-dd'">
                yyyy-MM-dd
              </a-select-option>
              <a-select-option :key="'yyyy-MM-dd HH'">
                yyyy-MM-dd HH
              </a-select-option>
              <a-select-option :key="'yyyy-MM-dd HH:mm'">
                yyyy-MM-dd HH:mm
              </a-select-option>
              <a-select-option :key="'yyyy-MM-dd HH:mm:ss'">
                yyyy-MM-dd HH:mm:ss
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="最大值" v-else-if="configType == 5">
            <a-input v-decorator="['content']" />
          </a-form-item>
          <a-form-item label="字段长度" v-else>
            <a-input v-decorator="['content']" />
          </a-form-item>
          <a-form-item label="是否启用">
            <a-radio-group v-model="isUse">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="是否必填">
            <a-radio-group v-model="isMust">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="是否独行">
            <a-radio-group v-model="isAlone">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-page-header>
      </a-form>
    </div>

  </a-modal>
</template>

<script>
import {
  addConfig,
  editConfig,
  queryFieldsDetail
} from "@/api/human/config"
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      configType: "1",
      configTitle: "用于姓名、公司名称等文字信息的输入",
      contentDate: "", // 日期格式内容
      isUse: 0, // 是否启用
      isMust: 0, // 是否必填
      isAlone: 0, // 是否独行
      type: '', // 进入页面的类型
      moduleId: '',
      enterpriseId: '',
      bid: "",
      submitLoading: false,

      selectData: [""],
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {

  },
  watch: {
    configType: {
      handler(newVal, oldVal) {
        if (newVal == '1') {
          this.configTitle = "用于姓名、公司名称等文字信息的输入"
        } else if (newVal == '2') {
          this.configTitle = "单选下拉框，选项值超过5项时使用"
        } else if (newVal == '3') {
          this.configTitle = "多选下拉框，选项值超过5项时使用"
        } else if (newVal == '4') {
          this.configTitle = "用于日期的选择，格式：2020-01-01"
        } else if (newVal == '5') {
          this.configTitle = "用于整数信息的输入，最大数值为：99999999  例如：1000"
        } else if (newVal == '6') {
          this.configTitle = "用于图片的上传 ，单张图片不能超过5MB"
        } else if (newVal == '7') {
          this.configTitle = "用于文件数据的上传，单个文件不能超过20MB"
        } else if (newVal == '8') {
          this.configTitle = "用于公司网站或活动链接"
        }
      }
    }
  },
  methods: {
    // 配置菜单切换
    configMenu(e) {
      this.configType = e.key;
      this.$nextTick(() => {
        this.events_form.resetFields();
        this.selectData = [""];
      })
    },
    // 添加选择项
    selectAdd(i) {
      if (this.selectData[i] == "") {
        return this.$message.warning('请填写内容后再添加')
      }
      this.selectData.splice(i, 0, "")
    },
    // 删除选择项
    selectDel(i) {
      if (this.selectData.length < 2) {
        return this.$message.warning('最后一条不可删除');
      }
      this.selectData.splice(i, 1)
    },
    // 打开编辑弹窗 
    async add(rows, enterpriseId, bid, tabstype) {
      this.title = bid === true ? '新增字段' : '编辑字段';
      this.moduleId = rows.moduleId;
      this.enterpriseId = enterpriseId;
      this.bid = bid;
      this.type = tabstype;
      this.visible = true;
      if (bid === true) {
        // 新增
        this.$nextTick(() => {
          this.events_form.resetFields();
        })
        this.isUse = 1;
        this.isMust = 0;
        this.isAlone = 0;
        this.contentDate = "";
        // this.configType = "1";
      } else {
        // 修改
        let { code, data } = await queryFieldsDetail({ fieldId: bid })
        let values = this.events_form.getFieldsValue();
        if (code == '1') {
          for (var key in data) {
            values[key] = data[key]
          }
          values["fieldName"] = data['name']
          
          this.isUse = data.isUse
          this.isMust = data.isMust
          this.isAlone = data.isAlone
          this.configType = data.fieldType
          if (this.configType == 2 || this.configType == 3) {
            this.selectData = (data.content || "").split(",")
          }
          if (this.configType == 4) {
            this.contentDate = data.content
          }
          this.events_form.setFieldsValue(values);
        }
      }
    },
    addFormSubmit() {
      const that = this;
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (that.bid == true) {
            values.moduleId = that.moduleId;
            values.enterpriseId = that.enterpriseId;
          } else {
            values.bid = that.bid;
          }
          if (that.configType == 2 || that.configType == 3) {
            values.content = that.selectData.join(',')
          }
          if (that.configType == 4) {
            if (!that.contentDate) {
              return that.$message.warning('请选择日期格式');
            } else {
              values.content = that.contentDate
            }
          }
          
          values.fieldType = that.configType;
          values.isUse = that.isUse;
          values.isMust = that.isMust;
          values.isAlone = that.isAlone;
          that.submitLoading = true;
          // console.log(values);
          const {
            code
          } = that.bid == true ? await addConfig(values) : await editConfig(values);
          that.submitLoading = false;
          if (code === '1') {
            that.visible = false;
            that.$message.success('操作成功');
            that.$emit('on-ok')
          }
        }
      });
    }
  }
}
</script>
<style lang="less">
.config_modal {
  .selectIcon {
    font-size: 20px;
    color: #1890ff;
    margin-left: 15px;
    cursor: pointer;
  }

  .ant-page-header-heading-title {
    font-size: 18px;
  }

  .ant-form-item {
    width: 100%;
    margin-right: 0;

    .ant-form-item-label {
      width: 30%;
    }

    .ant-form-item-control-wrapper {
      width: 70%;
    }
  }
}
</style>
